<template>
  <div class="flex gap-4 mb-6" :class="message.sender === 'user' ? 'justify-end' : ''">
    <Avatar
      :src="message.sender === 'user' ? userAvatar : aiAvatar"
      :alt="message.sender === 'user' ? 'You' : 'Chat AI'"
      size="sm"
      v-if="message.sender === 'ai'"
    />

    <div class="max-w-2xl">
      <div class="flex items-center gap-2 mb-1">
        <span class="text-sm font-medium">
          {{ message.sender === 'user' ? 'You' : 'Chat A.I+' }}
        </span>
        <span class="text-xs text-gray-400">
          {{ formatTime(message.timestamp) }}
        </span>
      </div>

      <div class="p-3 rounded-lg" :class="message.sender === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-800'">
        <p class="whitespace-pre-line">{{ message.content }}</p>
      </div>
    </div>

    <Avatar
      :src="message.sender === 'user' ? userAvatar : aiAvatar"
      :alt="message.sender === 'user' ? 'You' : 'Chat AI'"
      size="sm"
      v-if="message.sender === 'user'"
    />
  </div>
</template>

<script setup lang="ts">
  import { defineProps } from 'vue';
  import { Message } from '../types/chat';
  import Avatar from '../ui/Avatar.vue';

  const props = defineProps<{
    message: Message;
  }>();

  const userAvatar = 'https://picsum.photos/id/1005/200';
  const aiAvatar = 'https://picsum.photos/id/1012/200';

  const formatTime = (date: Date) => {
    return new Intl.DateTimeFormat('en-US', {
      hour: '2-digit',
      minute: '2-digit',
    }).format(date);
  };
</script>
